<template>
	<view>
		<navBar></navBar>
		<match-media :max-width="MAX_SIZEiZE">
			<view class="tabbar">
				<tabBar :showselected="true" ref="tabBar"></tabBar>
			</view>
		</match-media>
		<view class="uni-padding-wrap">
			<view class="content">
				<view class="slot_item">
					<view class="title">{{detailInfo && detailInfo.title}}</view>
					<view class="solt_shadow">
						<view class="ac_coupon-wrap" v-if="detailInfo.image" @click="handleJump(detailInfo.url)">
							<image :src="detailInfo.image" class="ac_coupon-content"></image>
						</view>
						<view class="shadow">
							<image class="shadow-image" src="@/static/image/playCircle.png"></image>
						</view>
					</view>
					<view class="cont" v-if="detailInfo.content">
						<rich-text :selectable="true" :nodes="detailInfo.content"></rich-text>
					</view>
				</view>
			</view>
			<Footer></Footer>
		</view>
	</view>
</template>
<script>
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import Footer from '@/components/footer/footer.vue'
	import {
		sendMessage
	} from '@/api/websocket.js'
	export default {
		components: {
			Footer
		},
		data() {
			return {
				MAX_SIZEiZE,
				activeId: '',
				detailInfo: null
			}
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.activeId = item.id
			this.getActiveDetail()
		},
		methods: {
			handleJump(url) {
				if (!url) return;
				// #ifdef APP
				plus.runtime.openURL(url)
				// #endif
				// #ifdef H5
				window.open(url)
				// #endif
			},
			getActiveDetail() {
				const {
					GETINFO
				} = this.$api
				sendMessage({
					flag: GETINFO,
					content: {
						id: this.activeId
					}
				})
				uni.$on(GETINFO, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.detailInfo = data
					}
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	@keyframes scaleBox {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(1.1);
		}
	}

	.content {
		width: 100%;
		max-width: 1200px;
		margin: auto;
		padding-bottom: 50px;
		background-color: #20262d;
		display: flex;
		flex-direction: column;
		align-items: center;

		.slot_item {
			max-width: 680px;
			width: 80%;
			border-radius: 16px;
			color: #fff;

			.title {
				width: 100%;
				margin: 20px 0 15px;
				word-break: break-all;
			}

			.solt_shadow {
				position: relative;
				border-radius: inherit;
				overflow: hidden;
				cursor: pointer;

				.ac_coupon-wrap {
					height: 0;
					padding-top: 100%;
					position: relative;

					.ac_coupon-content {
						position: absolute;
						top: 0;
						width: 100%;
						height: 100%;
						background-size: cover;
					}
				}

				.shadow {
					opacity: 0;
					display: none;

					.shadow-image {
						width: 42px;
						height: 42px;
					}
				}

			}

			.cont {
				width: 100%;
				margin-top: 20px;
				word-break: break-all;
			}
		}
	}

	/* #ifdef H5 */
	.solt_shadow:hover .ac_coupon-wrap {
		animation: scaleBox 0.25s ease 0s 1 normal forwards running;
	}

	/* #endif */
</style>